<template>
  <div class="all-center h-content flex dark:bg-gray-800 ">
    <div v-infinite-scroll="()=>{load(questionParams)}"
         class=" w-screen px-4 overflow-y-auto overscroll-contain scroll-bar-negitive">
      <div v-for="item in list" :key="item">
        <display-list-item :data="item"></display-list-item>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import DisplayListItem from "@/components/Q&A/DisplayListItem.vue";
import type { QuestionModule } from "@/module/questionModulle";
import router from "@/router";
import { getQuestionList, queryQuestionList } from "@/utils/api/questions";
import { ref, watch } from "vue";

let list = ref([] as QuestionModule[]);

let offset = 0;
let limit = 10;
let questionParams: string = "";

if (router.currentRoute.value.query.content != null) {
  questionParams = router.currentRoute.value.query.content.toString();
}

watch(() => router.currentRoute.value.query.content, (val) => {
  if (router.currentRoute.value.query.content != null) {
    questionParams = router.currentRoute.value.query.content.toString();
  }
  offset = 0;
  limit = 10;
  list.value = [];
  load(questionParams);
});


const load = (questionParams: string) => {
  if (questionParams != "") {
    queryQuestionList(questionParams, offset, limit).then((res) => {
      if (res.data.length !== 0) {
        for (let re of res.data) {
          if (re.problem_content.length > 100) {
            re.problem_content = re.problem_content.substring(0, 100) + "...";
          }
          list.value.push(re);
        }
        offset += 10;
        limit += 10;
      }

    });
  } else {
    getQuestionList(offset, limit).then((res) => {
      if (res.data.length !== 0) {
        for (let re of res.data) {
          if (re.problem_content.length > 100) {
            re.problem_content = re.problem_content.substring(0, 100) + "...";
          }
          list.value.push(re);
        }
        offset += 10;
        limit += 10;
      }

    });
  }
};

</script>

<style scoped>

.infinite-list {
    height: 100vh;
    /*width: 100vw;*/
    /*list-style: none;*/
}

.scroll-bar-negitive::-webkit-scrollbar {
    display: none;
}

.infinite-list .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 25vh;
    background: var(--el-color-primary-light-9);
    margin: 10px;
    color: var(--el-color-success);
}

.infinite-list .infinite-list-item + .list-item {
    margin-top: 10px;
}

</style>
